<template>
    <div>
        <el-dialog title="修改用户推荐关系" :visible="true" width="1000px" :modal-append-to-body="false"
            :close-on-click-modal="false" @close="handleClose">
            <el-form id="forms" ref="forms" :rules="rulesModel" :model="form" label-width="120px">
                <el-form-item label="当前用户手机号:">
                    <div>{{ info.phone }}</div>
                </el-form-item>
                <el-form-item label="当前推荐人:">
                    <div>{{ info.invuser }}</div>
                </el-form-item>
                <el-form-item label="新推荐人" prop="invuserid">
                    <div class="flex">
                        <el-input v-model="selectiveUsername" style="width: 200px;" :disabled="true" placeholder="" />
                        <el-button type="primary" @click="openUserList()"
                            style="margin-left: 10px;">选择用户</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 选择用户弹窗 -->
        <digUserList v-if="modalStatus == 10" @info="handleObject" />
    </div>
</template>

<script>
import { SetUserInv } from "@/api/users.js";
import digUserList from "../../../components/digUserList.vue";
export default {
    props: {
        info: {
            default: {},
            type: Object
        },
    },
    components: { digUserList },
    data() {
        return {
            form: {}, // 详情实体
            rulesModel: {
                invuserid: [
                    { required: true, message: '请选择推荐人', trigger: 'blur' }
                ],
            },
            buttonLoading: false,

            selectiveUsername: '', // 用户名称

            modalStatus: 0, // 打开组件弹窗参数
            currentInfo: {}, // 当前用户信息
        }
    },

    mounted() {
        this.setForm();
    },
    methods: {
        /**关闭弹窗 */
        handleClose() {
            this.$parent.modalStatus = 0
        },
        /**表单参数初始化 */
        setForm() {
            this.form = {
                userid: this.info.userid,
                invuserid: '',
            };
            this.selectiveUsername = info.invuser;
        },
        /**打开用户列表弹窗 */
        openUserList() {
            this.modalStatus = 10;
        },
        //选择用户监听
        handleObject(obj) {
            this.form.invuserid = obj.userid
            this.selectiveUsername = obj.phone;
        },
        /**（提交） */
        async submit() {
            try {
                try {
                    await this.$refs['forms'].validate()
                } catch (e) {
                    console.log(e)
                    return
                }
                this.buttonLoading = true
                const { success, msg } = await SetUserInv(this.form)
                this.buttonLoading = false
                if (success) {
                    this.handleClose();
                }
                this.$message({
                    message: msg,
                    type: success ? 'success' : 'error'
                })
            } catch (e) {
                // 取消
                console.log(e)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
</style>